<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改海报配置')"/>
    <th:block th:include="include :: cropper-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-posterConfigure-edit" th:object="${ecardPosterConfigure}">
        <input name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">海报标题
                ：</label>
            <div class="col-sm-8">
                <input name="title" th:field="*{title}" class="form-control"  maxlength="20"
                       type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">海报属性
                ：</label>
            <div class="col-sm-8">
                <select name="attribute" class="form-control" required
                        th:with="type=${@dict.getType('ecard_poster_attribute')}" onchange="attrChange(this.value);">
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:field="*{attribute}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">海报类目
                ：</label>
            <div class="col-sm-8">
                <select name="posterType" id="posterType" class="form-control" required>
                    <option value="">所有</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">是否编辑
                ：</label>
            <div class="col-sm-8">
                <select name="editSts" class="form-control"
                        th:with="type=${@dict.getType('ecard_poster_edit_sts')}" required>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:field="*{editSts}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">海报文案
                ：</label>
            <div class="col-sm-8">
                <textarea type="text" name="details" class="form-control" placeholder="请输入文本"  maxlength="220"
                          th:field="*{details}"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">法人机构
                ：</label>
            <div class="col-sm-8">
                <select name="deptId" id="deptId" class="form-control"
                        th:with="type=${@dept.selectDeptListByType('2')}"
                        required>
                    <option th:each="dept : ${type}" th:text="${dept.deptName}" th:value="${dept.deptId}"
                            th:field="*{deptId}"></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label  is-required">海报图片：<span
                    style="color: red">(600px*900px)</span>：</label>
            <div class="col-sm-8">
                <input type="hidden" id="posterImg" name="posterImg">
                <div class="imageBox">
                    <img id="imgId"
                    th:src="(${#strings.isEmpty(ecardPosterConfigure.posterImg)}) ? @{/img/default.png} : @{${ecardPosterConfigure.posterImg}}"
                    th:onerror="'this.src=\'' + @{'/img/default.png'} + '\''">
                </div>
                <div class="action">
                    <div class="new-contentarea tc">
                        <a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label>
                        </a>
                        <input type="file" name="poster" id="inputImage" accept="image/*"/>
                    </div>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i
                            class="fa fa-search-plus"></i></button>
                    <button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i
                            class="fa fa-search-minus"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i
                            class="fa fa-rotate-left"></i></button>
                    <button type="button" class="btn-custom" data-method="rotate" data-option="45"><i
                            class="fa fa-rotate-right"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i
                            class="fa fa-arrows-h"></i></button>
                    <button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i
                            class="fa fa-arrows-v"></i></button>
                    <button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: cropper-js"/>
<script th:inline="javascript">
    var prefix = ctx + "config/posterConfigure";
    $("#form-posterConfigure-edit").validate({
        focusCleanup: true
    });
    var attribute = [[${ecardPosterConfigure.attribute}]];
    var posterType = [[${ecardPosterConfigure.posterType}]];
    attrChange(attribute);
    function attrChange(val) {
        var str ="";
        var typeDatas = "";
        if (val == '1') {
            typeDatas = [[${@dict.getType('ecard_poster_curr_type')}]];
        } else {
            typeDatas = [[${@dict.getType('ecard_poster_bank_type')}]];
        }
        for (var i = 0; i < typeDatas.length; i++) {
            if (typeDatas[i].dictValue == posterType) {
                str += '<option value="' + typeDatas[i].dictValue + '" selected="selected">' + typeDatas[i].dictLabel + '</option>';
            } else {
                str += '<option value="' + typeDatas[i].dictValue + '">' + typeDatas[i].dictLabel + '</option>';
            }
        }
        $('#posterType').html(str);
    }
    var cropper;
    var croppable = false;
    $(window).on('load', function () {
        var image = document.getElementById('imgId');
        cropper = new Cropper(image, {
            aspectRatio: 0.66,//设置宽高比例
            viewMode: 1,
            autoCropArea: 1,
            //preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function () {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function (e) {
                    if (croppable) {
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click', function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍候...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if (['scaleX', 'scaleY'].indexOf(data.method) !== -1) {
                $(this).data('option', -data.option)
            }
        })
    });
    //设置裁剪高度
    $(window).resize(function () {
        $('.imageBox').height("300px");
        $('.cropped').height("400px");
    }).resize();
    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function (callback, type, quality) {
                var canvas = this;
                setTimeout(function () {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }
    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍候...");
            return
        }
        if ($.validate.form()) {
            //校验图片上传
            const inputImage = $("#inputImage").val();
            const id = $("#id").val();
            if (inputImage == ''&&id == '') {
                $.modal.alertError("请上传图片！");
                return
            }
            cropper.getCroppedCanvas().toBlob(function (img) {
                var formdata = new FormData();
                formdata.append("file", img);
                formdata.append("fileType", "/ecard/posterImg");
                $.ajax({
                    url: ctx + "common/uploadCropperImage",
                    data: formdata,
                    type: "post",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        $("#posterImg").val(result.data.fileUrl);
                        $.operate.save(prefix + "/edit", $('#form-posterConfigure-edit').serialize());
                    }
                })
            });
        }
    }
</script>
</body>
</html>